<template>
  <div>
    <div>
      <myHeader v-show="showHeader"></myHeader>
    </div>
    <div>
      <video id="hlsVideo" ref="hlsVideo" controls preload="true"></video>
    </div>
  </div>
</template>
   
<script>
const myHeader = () => import("../common/myHeader");

import Hls from 'hls.js';

export default {
  components: {
    myHeader
  },
  data() {
    return {
      showHeader: true,
      hls: ''
    }
  },
  methods: {
    getParams: function () {
      this.title = this.$route.query.title;
      if (localStorage.getItem('videoUrl')) {
        this.videoUrl = localStorage.getItem('videoUrl');
        localStorage.clear();
      };
    },
    destroyHls: function () {
      if (this.hls) {
        this.$refs.hlsVideo.pause();
        this.hls.destroy();
        this.hls = null;
      }
    },
    loadVideoFn: function () {
      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(this.videoUrl);
        this.hls.attachMedia(this.$refs.hlsVideo);
        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log('加载成功');
          this.showHeader = false;
          this.$refs.hlsVideo.play();
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          // console.log(event, data);
          // 监听出错事件
          console.log('加载失败');
        });
      }
    },
  },
  computed: {

  },

  created: function () {
    let _this = this
    _this.getParams();
    _this.$once('hook:beforeDestroy', () => {
      _this.destroyHls()
    })
  },

  mounted() {
    let _this = this;
    _this.loadVideoFn()
  },

  watch: {
  },
}
</script>
   
<style scoped>
#hlsVideo {
  width: 100%;
  height: 80%;
  border: none;
}
</style>
   
   